<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录页面</title>
    <!--引入BootStrap样式-->
    <link href="../css/zui/css/zui.min.css" rel="stylesheet">
    <link href="../css/zui/lib/uploader/zui.uploader.min.css" rel="stylesheet">

    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/angularjs/angular.min.js"></script>
    <style>
        body {
            background: url("../images/4.jpg") no-repeat center fixed;
        }

        .content {
            margin: 50px;
        }

        .login-box {
            background: white;
            box-shadow: 0 0 0 15px rgba(255, 255, 255, .1);
            border-radius: 5px;
            padding: 40px;
        }

        .login-form, .form-group {
            margin-top: 20px;
        }
    </style>

</head>
<script type="text/javascript">
    var app = angular.module('springboot',[]);
    app.controller('yzmController',function ($scope,$http) {
        //登录验证
        $scope.select = function () {
            if ($scope.user == null){
                alert("输入你的信息");
            } else {
                $http.get('../login?yzm=' + $scope.user.code + "&username=" + $scope.user.username + "&password=" + $scope.user.password)
                    .success(function (response) {
                        if (response.success) {
                            window.location.href = 'SpringBootTest.html';
                            localStorage.setItem("username",$scope.user.username);
                            localStorage.setItem("password",$scope.user.password);
                        } else {
                            alert(response.message);
                        }
                    })
            }

        }
        var code1 = null;
        //检查是否有该手机号码
        $scope.phoneCheck=function () {
            $http.get('../phoneCheck?phone='+$scope.phone.number).success(function (response) {
                if (response.success){
                    code1 = response.message;
                    $scope.aaa = true;
                    $scope.countDown(60);
                } else {
                    alert(response.message);
                }
            })
        }
        //倒计时
        $scope.countDown = function (s) {
            if(s <= 0){
                $("#go").text("重新获取");
                $scope.aaa = false;
                return;
            }
            /* $("#go").val(s + "秒后重新获取");*/
            $("#go").text(s + "秒后重新获取");
            setTimeout(function () {
                $scope.countDown(s-1);
            },1000)
        }
        //手机验证，切勿修改，要花钱
        $scope.go = function () {
            var code2 = $scope.phone.code;
            if (code1 == code2){
                window.location.href = "SpringBootTest.html"
            } else {
                alert("验证码错误");
            }

        }

    })

</script>
<body  ng-app="springboot" ng-controller="yzmController">

<div class="content">
    <!-- logo -->
    <div class="row">
        <img src="../images/2.gif">
    </div>
    <!--表单-->
    <div class="row" style="margin-top: 50px">
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-sm-offset-4 login-box">
            <!--标签页，两种登录方式-->
            <ul class="nav nav-secondary nav-justified">
                <li id="a_login" class="active"><a data-toggle="tab" href="#account-login">账号登录</a></li>
                <li id="p_login"><a data-toggle="tab" href="#phone-login">手机快捷登录</a></li>
            </ul>
            <!-- 标签页内容，两种表单 -->
            <div class="tab-content">
                <!--普通登录-->
                <div class="tab-pane fade in active" id="account-login">
                    <form id="normal_form" name="myForm" role="form" class="login-form" method="post">
                        <div class="form-group">
                            <label for="username" class="sr-only">用户名</label>
                            <input type="text" id="username" name="username" value="" class="form-control" placeholder="用户名" ng-model="user.username" required>
                            <span id="username_span" style="color: red" ng-show="myForm.username.$dirty && myForm.username.$invalid">
                                 <span ng-show="myForm.username.$error.required">请输入用户名</span>
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="password" class="sr-only">密码</label>
                            <input type="password" id="password" name="password" value="" class="form-control" placeholder="密码" ng-model="user.password" required>
                            <span id="password_span" style="color: red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
                                 <span ng-show="myForm.password.$error.required">请输入密码</span>
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="code" class="sr-only">验证码</label>
                            <input type="text" id="code"  name="code" class="form-control" placeholder="验证码" ng-model="user.code" required>
                        </div>

                        <div>
                            <img id="captchaImg" style="CURSOR: pointer" src="/code" onclick="this.src='/code?'+Math.random()"
                                 title="看不清楚?请点击刷新验证码!" align='absmiddle'
                                 height="18" width="55">
                            <a href="javascript:;"
                               style="color: #666;">看不清楚,点击验证码刷新</a> <span id="code_span" style="color: red" ng-show="myForm.code.$dirty && myForm.code.$invalid">
                                 <span ng-show="myForm.code.$error.required">请输入验证码</span>
                            </span>
                        </div>
                        <div class="form-group">
                            <!-- 多选框 -->
                            <div class="checkbox">

                            </div>
                        </div>
                        <div class="form-group">
                            <button type="button" id="btn" class="btn btn-primary btn-block" ng-click="select()">登录</button>
                            <br/>
                            <div style="margin-left: 260px"> <a href = "register.html" >立即注册</a></div>
                        </div>

                    </form>
                </div>
                <!--手机登录 切勿修改，要钱-->
                <div class="tab-pane fade" id="phone-login">
                    <form role="form" class="login-form form-horizontal" id="phone_form" method="post">
                        <div class="form-group">
                            <label for="username" class="sr-only">用户名</label>
                            <div class="col-xs-12">
                                <input type="text" id="phone" name="telephone" class="form-control" placeholder="手机号" ng-model="phone.number">
                                <input type="hidden" id="tab" name="tab"  value="pho-login">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="sr-only">密码</label>
                            <div class="col-xs-6">
                                <input type="text" id="verifyCode" name="code" class="form-control" placeholder="验证码" ng-model="phone.code">
                            </div>
                            <div class="col-xs-6">
                                <button class="btn btn-primary btn-block" id="go" ng-disabled="aaa" ng-click="phoneCheck()">获取验证码</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <!-- 多选框 -->
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
                                <button type="button" id="phone_btn" class="btn btn-primary btn-block" ng-click="go()">登录</button>
                                <br/>
                                <div style="margin-left: 260px"> <a href = "register.html" >立即注册</a></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>